<template>
  <div>
    <el-table :data="filteredBooks" style="width: 100%">
      <el-table-column label="书籍Id" prop="id"></el-table-column>
      <el-table-column label="书名" prop="title"></el-table-column>
      <el-table-column label="作者" prop="author"></el-table-column>
      <el-table-column label="总数量" prop="copies"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            @input="updateSearch"/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改图书</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <el-button size="mini" type="danger" slot="reference">删除图书</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <br>
    <div>
      书籍Id:<el-input v-model="book.id" placeholder="请输入id" class="in"></el-input>
      书名:<el-input v-model="book.title" placeholder="请输入title" class="in"></el-input>
      作者:<el-input v-model="book.author" placeholder="请输入author" class="in"></el-input>
      总数量:<el-input v-model="book.copies" placeholder="copies" class="in"></el-input> 
      <el-button type="primary" round @click="addBookHandler">添加书籍</el-button>
    </div>

    <el-dialog
      title="编辑图书信息"
      :visible.sync="dialogEditVisible"
      width="30%"
      @close="resetEditForm">
      <el-form :model="editBook" label-width="80px" ref="editBookForm">
        <el-form-item label="书籍Id">
          <el-input v-model="editBook.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="书名">
          <el-input v-model="editBook.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="editBook.author"></el-input>
        </el-form-item>
        <el-form-item label="总数量">
          <el-input v-model.number="editBook.copies"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  name: 'HelloWorld',
  data() {
    return {
      book: {
        id: '',
        title: '',
        author: '',
        copies: ''
      },
      dialogEditVisible: false,
      editBook: {}
    };
  },
  computed: {
    ...mapState(['search']),
    ...mapGetters(['filteredBooks'])
  },
  methods: {
    ...mapActions(['addBook', 'deleteBook', 'updateBook', 'setSearch']),
    updateSearch(event) {
      this.setSearch(event);
    },
    handleEdit(index, row) {
      this.editBook = JSON.parse(JSON.stringify(row));
      this.dialogEditVisible = true;
    },
    handleDelete(bookId) {
      this.deleteBook(bookId);
    },
    resetEditForm() {
      this.$refs['editBookForm'].resetFields();
      this.dialogEditVisible = false;
    },
    saveEdit() {
      this.$refs['editBookForm'].validate((valid) => {
        if (valid) {
          this.updateBook(this.editBook);
          this.resetEditForm();
        } else {
          console.log('Error in form validation');
          return false;
        }
      });
    },
    addBookHandler() {
      this.book.id = Number.parseInt(this.book.id, 10);
      if (!this.book.id || !this.book.title || !this.book.author || !this.book.copies) {
        alert("所有字段都是必填的！");
        return;
      }
      if (this.filteredBooks.find(book => book.id === this.book.id)) {
        alert("书籍ID重复！");
        return;
      }
      this.addBook(this.book);
      this.book = {
        id: '',
        title: '',
        author: '',
        copies: ''
      };
    }
  }
};
</script>

<style scoped>
.in {
  width: 200px;
}
</style>